<template>
	<view class="" v-if="!userStore().unifo?.isLogin">
		<view class="welcome-mini flex">
			<image src="../../static/images/mini/miniwelcome.jpg" mode=""></image>
			<view class="welcome-mini-text"><text>快来开启美食之旅吧</text></view>
			<view 
			 class="welcome-mini-view" 
			 @click="handleToLogin"> 
			  <text class="cuIcon-right "></text>
			</view>
		</view>
		<text class="welcome-mini-font">图片来自 Freepik（作者：pikisuperstar)</text>
	</view>
	<view v-if="userStore().unifo?.isLogin">
		<view class="mini-topCard">
			<view class="mini-view-image">
				<image src="/src/static/images/1.jpg" mode=""></image>
			</view>
			<view class="mini-user">
				<text class="mini-username">{{userInfoStore.unifo?.username?userInfoStore.unifo?.username:'请登录'}}</text>
				<view class="mini-usermessage flex">
					<text>女</text>
					<text>2021年加入</text>
				</view>
				<!-- <button class="mini-button">加入</button> -->
				<view class="" @click="handleToSetting"><image src="/src/static/images/mini/setting.png" mode=""></image></view>
			</view>
			<view class="flex mini-list">
				<view class="mini-box">
					<view class=""><text class="mini-number">10</text></view>
					<text class="mini-font">关注</text>
				</view>
				<view class="mini-border" ></view>
				<view class="mini-box">
					<view class=""><text class="mini-number">10</text></view>
					<text class="mini-font">粉丝</text>
				</view>
				<view class="mini-border" ></view>
				<view class="mini-box">
					<view class=""><text class="mini-number">10</text></view>
					<text class="mini-font">收到的赞</text>
				</view>
			</view>
		</view>
		<view class=""></view>
		<view class="" style="margin-top:200px;">
			<button @click="handleToLogin">登录</button>
			<button @click="handleToTry">启动页</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import {userStore} from '../../store/user'
import type {ErrorType} from '../../model/user'
//状态机的使用
const userInfoStore=userStore()
// onLoad(() => {
//       // 首次加载时检查（最早触发的生命周期）
//       if (!userStore().unifo?.isLogin) {
//         uni.redirectTo({ 
// 			url: '/pages/mini/miniwelcome' ,
// 			success: () => {
// 			    console.log('未登录，已跳转到登录页')
// 			},
// 			fail: (err:ErrorType) => {
// 			    console.error('跳转失败:', err)
// 			}
// 		})
//       }
//     })
const handleToLogin = () =>{
	uni.navigateTo({
		url:"/pages/accont/login"
	})
}
const handleToTry = () =>{
	uni.navigateTo({
		url:"/pages/welcome/welcome"
	})
}
const handleToSetting = () =>{
	uni.navigateTo({
		url:"/pages/mini/setting/setting"
	})
}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.mini-topCard{
	width: 700upx;
	height: 260upx;

	margin-left: 25upx;
	margin-top: 100upx;
	border-radius: 20upx;
	box-shadow: 2rpx 4rpx 12rpx rgba(0, 0, 0, 0.1);
	position: relative; 
	image{
		width:160upx ;
		height:160upx;
		border-radius: 50%;
	}
	.mini-view-image{
		border: #fff 10upx solid;
		width:160upx ;
		height:160upx;
		border-radius: 50%;
		position: absolute;
		top:-60upx;
		left:60upx;
	}
	.mini-user{
		position: absolute;
		top:30upx;
		left:280upx;
		.mini-username{
			font-size: 36upx;
			font-weight: bold;
		}
		.mini-usermessage{
			color: #999;
			font-size: 24upx;
			margin-top: 10upx;
		}
		image{
			width:40upx;
			height:40upx;
			position: absolute;
			top:15upx;
			left:340upx;
		}
	}
	.mini-button{
		width: 160upx;
		height: 70upx;
		font-size: 30upx;
		font-weight: bold;
		background-color:#FF6B35 ;
		color: #FFF;
		border-radius: 50upx;
		position: absolute;
		top:30upx;
		left:230upx;
	}
	.mini-list{
		position: absolute;
		top:160upx;
		left:20upx;
		text-align: center; /* 文本居中 */
		align-items: center;
		width: 650upx;
		.mini-box{
			flex: 1;
		}
		.mini-border{
			border-right:1rpx solid #ccc ;
			height:50upx;
		}
		.mini-number{
			font-size: 32upx;
			font-weight: bold;
		}
		.mini-font{
			font-size: 20upx;
			color: #999;
		}
	}
}
.welcome-mini{
	width: 600upx;
	height: 800upx;
	border-radius: 25upx;
	align-items: center;
	flex-direction: column;
	position: absolute;
	top:200upx;
	left:70upx;
	padding: 30upx;
	image{
		width: 500rpx;
		height: 300upx;
		margin-top: 50upx;
		margin-bottom: 70upx;
	}
	.welcome-mini-text{
		width: 470upx;
		text{
			color: #FD7753 ;
			font-size: 52upx;
			font-weight: bold;
		}
	}
	.welcome-mini-view{
		margin-top: 70upx;
		background-color: #FD7753;
		padding: 30upx;
		border-radius: 50%;
		.cuIcon-right{
			font-size: 36upx;
			font-weight: bolder;
			color: #fff;
		}
	}
}
.welcome-mini-font{
	font-size: 14upx;
	color: #ccc;
	position: absolute;
	top:1300upx;
	left:240upx;
}
</style>
